<template>
<div class="homepage">
       <!-- close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true -->
      <!-- show-close	是否显示关闭按钮	boolean	—	true -->
      <!-- close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true -->
      <el-dialog 
        title="提交信息"
        :visible.sync="dialogFormVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
      <el-form
        :model="ruleForminfo"
        status-icon
        :rules="rulesinfo"
        ref="ruleForminfo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            type="text"
            v-model="ruleForminfo.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>

       <el-form-item label="学校" prop="school">
          <el-select
            placeholder="请选择学校"
            v-model="ruleForminfo.school"
            style="width: 100%"
          >
            <el-option label="请选择学校" value=""> </el-option>

            <el-option
              :label="item.school"
              :value="item.school"
              v-for="(item, index) in selectSchool"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="院系" prop="faculty">
          <el-select
            placeholder="请选择院系"
            v-model="ruleForminfo.faculty"
            style="width: 100%"
          >
            <el-option label="请选择院系" value=""> </el-option>

            <el-option
              :label="item.faculty"
              :value="item.faculty"
              v-for="(item, index) in selectFaculty"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="专业" prop="major">
          <el-select
            placeholder="请选择专业"
            v-model="ruleForminfo.major"
            style="width: 100%"
          >
            <el-option label="请选择专业" value=""> </el-option>

            <el-option
              :label="item.major"
              :value="item.major"
              v-for="(item, index) in selectMajor"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级" prop="classroom">
          <el-select
            placeholder="请选择班级"
            v-model="ruleForminfo.classroom"
            style="width: 100%"
          >
            <el-option label="请选择班级" value=""> </el-option>

            <el-option
              :label="item.classroom"
              :value="item.classroom"
              v-for="(item, index) in selectclassroom"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学号" prop="studentid">
          <el-input v-model.number="ruleForminfo.studentid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForminfo')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForminfo')">重置</el-button>
        </el-form-item>
      </el-form>
      </el-dialog>
  
  <div class="exam-notice" v-show="StudentInfomation">
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>考试须知</h2>
    </div>
    <div class="text">
      <p>一、考试为在线考试，有时间限制</p>
      <p>二、考试期间不得离开考试页面，否则离开两次将自动交卷</p>
      <p>三、考试请独立思考，不得与他人交流</p>
      <p>四、若还没开考，请耐心等待</p>
    </div>
  </el-card>
  </div>
</div>
  
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message, MessageBox } from "element-ui";
export default {
  mounted() {
     //获取班级
    this.getSchool();
    //获取学生信息
    this.getStudentInfomation();
  },
   watch:{
 //深度监听一个对象的某个值发生变化
    "ruleForminfo.school": {
      deep: true,
      handler(val, oldval) {
          //获取院系
      axios
        .get(`/v1/students/schoolinfo/${val}`)
        .then((res) => {
          // console.log(res.data);
          this.selectFaculty = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      },
    },

    "ruleForminfo.faculty": {
      deep: true,
      handler(val, oldval) {
          //获取专业
      axios
        .get(`/v1/students/schoolinfo2/${this.ruleForminfo.school}&${val}`)
        .then((res) => {
          // console.log(res.data);
          this.selectMajor = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
      },
    },

    "ruleForminfo.major": {
      deep: true,
      handler(val, oldval) {
          //获取专业
      axios
        .get(`/v1/students/selectclassroom/${this.ruleForminfo.school}&${this.ruleForminfo.faculty}&${val}`)
        .then((res) => {
          // console.log(res.data);
          this.selectclassroom = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    
      },
    },
  },
  methods: {
     submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitStudentInfomation();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取学校
    getSchool() {
      axios
        .get("/v1/students/schoolinfo")
        .then((res) => {
          // console.log(res.data);
          this.selectSchool = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交学生信息
    submitStudentInfomation() {
      axios({
        method: "post",
        url: "/v1/students/studentinfomation",
        data: qs.stringify({
          name: this.ruleForminfo.name,
          school:this.ruleForminfo.school,
          faculty:this.ruleForminfo.faculty,
          major:this.ruleForminfo.major,
          classroom: this.ruleForminfo.classroom,
          studentid: this.ruleForminfo.studentid,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      })
        .then((result) => {
          if (result.data.status == 200) {
            Message.success({
              showClose: true,
              message: "提交成功",
              type: "success",
            });
            //更新数据
            this.getStudentInfomation();
          } else {
            Message.error({
              showClose: true,
              message: "提交失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          MessageBox("服务器开小差了~请稍后再试", "提示", {
            confirmButtonText: "确定",
            type: "error",
          });
          console.log(err);
        });
    },
      //获取学生信息
    getStudentInfomation() {
    
       axios
        .get("/v1/students/studentinfomation")
        .then((res) => {
          //   console.log(res.data);
          if (res.data.status == 200) {
            //保存用户信息，判断是否存在来显示页面
            this.StudentInfomation = true;
            //如果用户信息存在则隐藏对话框
            this.dialogFormVisible=false;
            localStorage.studentInfomation = this.StudentInfomation;
            this.$store.commit("setStudentInfomation",this.StudentInfomation );
          } else {
            //否则让为this.StudentInfomation=false,让提交信息界面显示
            this.StudentInfomation = false;
            localStorage.studentInfomation = this.StudentInfomation;
            this.$store.commit("setStudentInfomation",this.StudentInfomation );
            //如果用户信息不存在则显示对话框
            this.dialogFormVisible=true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
     
     
    },
  },
   data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("姓名不能为空"));
      } else {
        callback();
      }
    };
     var validateSchool = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("学校不能为空"));
      } else {
        callback();
      }
    };
     var validateFaculty = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("院系不能为空"));
      } else {
        callback();
      }
    };
     var validateMajor = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("专业不能为空"));
      } else {
        callback();
      }
    };
    var validateClassroom = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择班级"));
      } else {
        callback();
      }
    };
    var validateStudentid = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入学号"));
      } else {
        callback();
      }
    };
    return {
      selectclassroom: [""], //给初始值，避免axios异步没有取得数据时报错
      selectSchool: [""], 
      selectFaculty: [""], 
      selectMajor: [""], 
      StudentInfomation: false,
      dialogFormVisible: false,//默认对话框不显示
      ruleForminfo: {
        name: "",
        school:"",
        faculty:"",
        major:"",
        classroom: "",
        studentid: "",
      },
      rulesinfo: {
        name: [{ validator: validateName, trigger: "blur" }],
        school: [{ validator: validateSchool, trigger: "change" }],
        faculty: [{ validator: validateFaculty, trigger: "change" }],
        major: [{ validator: validateMajor, trigger: "change" }],
        classroom: [{ validator: validateClassroom, trigger: "change" }],
        studentid: [{ validator: validateStudentid, trigger: "blur" }],
      },
    };
  },
}
</script>

<style lang="css">
.homepage {
  margin-top: 50px
}
</style>
